<template>
  <div class="drawerDetail">
    <el-drawer :visible="drawerOrderInfo"
               size="50%"
               :before-close="handleClose"
               ref="drawer"
               :with-header="false">
      <!-- 订单信息 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>订单信息</span>
        </div>
        <div class="padding30">
          <div>订单编号: {{ orderInfoData.orderNumber }}</div>
          <div class="flex-align-center">已选技师：

            <img class="avaterName"
                 :src="orderInfoData?.technician?.head"
                 alt="" />
            <span>{{ orderInfoData?.technician?.technicianName }}</span>
          </div>
          <div v-if="!(!(orderInfoData.orderList?.length)&&orderInfoData.fatherOrderNumber)">服务时长:
            {{
              orderInfoData.packageList?.serviceTime
                ? orderInfoData.packageList?.serviceTime
                : '0'
            }} 分钟</div>
          <div v-if="(!(orderInfoData.orderList?.length)&&orderInfoData.fatherOrderNumber)">加钟时长:
            {{
             orderInfoData?.packageList?.clockTime
            }} 分钟</div>
          <div v-if="orderInfoData?.orderList?.length">加钟时长:{{ 
		       serviceTimeTotal
            }}
            分钟</div>

          <div>出行费用:
            ￥{{
              orderInfoData.expensesIncurred
                ? orderInfoData.expensesIncurred
                : '0'
            }} 元</div>
          <div>支付状态: {{ informationType(orderInfoData?.status)?.status }}</div>

          <div style="color: #1890ff;">{{orderInfoData?.status==5?'已退':'所用'}}{{ integralName?integralName:'积分' }}:
            {{ orderInfoData.pointsUsed ? orderInfoData?.pointsUsed : '0' }} {{ integralName?integralName:'积分' }}</div>
          <div style="color: #1890ff;">{{orderInfoData?.status==5?'已退':'所用'}}卡券抵扣:
            {{ cardCoupon(orderInfoData?.pointsUsed,orderInfoData?.deductionAmount) }} 元</div>
          <div>{{orderInfoData?.status==5?'已退':''}}抵扣余额:
            ￥{{
              orderInfoData.deductionAmount
                ? orderInfoData.deductionAmount
                : '0'
            }} 元</div>
          <div>订单时间: {{formattedDate(orderInfoData.updatedAt)  }}</div>
          <div>支付方式: {{orderInfoData.payMethod=='1'?'余额支付':'微信支付'  }}</div>
          <div v-if="orderInfoData.remark">订单备注: {{orderInfoData.remark }}</div>
          <div v-if="!(!(orderInfoData.orderList?.length)&&orderInfoData.fatherOrderNumber)">服务项目费用:
            ￥{{
            orderInfoData.disbursements
            }} 元</div>

          <div v-if="orderInfoData.orderList?.length">加钟费用:
            ￥{{
            disbursementsTotal
            }} 元</div>
          <div v-if="!(orderInfoData.orderList?.length)&&orderInfoData.fatherOrderNumber">加钟费用:
            ￥{{
            orderInfoData.plusClockPrice
            }} 元</div>
          <div v-if="orderInfoData.orderList?.length">实付款（包含加钟费用）:
            ￥{{
             Number(( orderInfoData.disbursements)) + disbursementsTotal
            }} 元</div>
          <div v-else-if="!(orderInfoData.orderList?.length)&&orderInfoData.fatherOrderNumber">实付款:
            ￥{{
              orderInfoData.plusClockPrice ? orderInfoData.plusClockPrice : '0'
            }} 元</div>
          <div v-else>实付款:
            ￥{{
              orderInfoData.disbursements ? orderInfoData.disbursements : '0'
            }} 元</div>

          <div v-if="orderInfoData?.status==5&& !(orderInfoData.payStatus=='2')">退款费率: <span style="color: red;">{{ orderInfoData.refundRate }}%</span></div>
          <!-- <div v-if="orderInfoData.status==5&& !(orderInfoData.payStatus=='2')">实际退款: <span style="color: red;">{{ orderInfoData.expensesIncurred?((Math.floor((orderInfoData.disbursements-((((orderInfoData.refundRate))?((orderInfoData.refundRate)):0)* orderInfoData.disbursements  )/100) * 100) / 100).toFixed(2)-orderInfoData.expensesIncurred).toFixed(2):(Math.floor((orderInfoData.disbursements-((((orderInfoData.refundRate))?((orderInfoData.refundRate)):0)* orderInfoData.disbursements  )/100) * 100) / 100).toFixed(2) }}元</span></div> -->
          <div v-if="orderInfoData?.status==5&& !(orderInfoData.payStatus=='2')">实际退款: <span style="color: red;">{{ orderInfoData.refundAmount?orderInfoData.refundAmount:0}}元</span></div>
        </div>
      </el-card>
      <!-- 商品信息 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>商品信息</span>
        </div>
        <div class="realNameStyle display">
          <div class="flex">
            <div v-if="!(orderInfoData?.fatherOrderNumber)">
              <img class="avaterName"
                   :src="orderInfoData.packageList?.rotationChart"
                   alt="" />

            </div>
            <div v-else>
              <img class="avaterName"
                   :src="orderInfoData?.packageList?.rotationChart"
                   alt="" />
              <div class="addClocks"><span style="color: #fff;font-size: 10px;">加钟</span></div>
            </div>
            <div class="flex"
                 v-if="orderInfoData.orderList?.length">
              <div v-for="(item,i) in orderInfoData.orderList"
                   :key="i">
                <img class="avaterName"
                     :src="item?.packageList?.rotationChart"
                     alt="" />
                <div v-if="item.fatherOrderNumber"
                     class="addClocks"><span style="color: #fff;font-size: 10px;">加钟</span></div>
              </div>
            </div>
          </div>
          <div class="flex-column-between"
               style="height: 74px">
            <div>{{ orderInfoData.orderName }}</div>
            <div v-if="orderInfoData.orderList?.length"
                 class="technicianName">数量x{{ orderInfoData?.number+ Number(orderInfoData.orderList?.length)}}</div>
            <div v-else
                 class="technicianName">数量x{{ orderInfoData?.number }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>订单统计</span>
        </div>
        <div class="realNameStyle">
          <div class="padding30">
            <div>技师抽佣:{{ orderInfoData?.technicianCommissionRatio?orderInfoData?.technicianCommissionRatio:'--' }}%</div>
            <div style="font-weight: 700;color: black;">一级分销</div>
            <div>姓名：<span style="color: #1890ff;">{{ orderInfoData?.firstOrderUsername?orderInfoData?.firstOrderUsername:'--' }}</span></div>
            <div>佣金：{{ orderInfoData?.firstOrderAmount?orderInfoData?.firstOrderAmount:'--' }}</div>
            <div style="font-weight: 700;color: black;">二级分销</div>
            <div>姓名：<span style="color: #1890ff;">{{  orderInfoData?.secondLevelUsername?orderInfoData?.secondLevelUsername:'--' }}</span></div>
            <div>佣金：{{ orderInfoData?.secondLevelAmount?orderInfoData?.secondLevelAmount:'--' }}</div>
            <div style="font-weight: 700;color: black;">加钟订单信息</div>
            <ele-pro-table ref="table"
                           :columns="columns"
                           :datasource="datasource"
                           cache-key="systemUserTable">
              <!-- 名字 -->
              <template v-slot:payMethod="{ row }">

                <el-link :underline="false"
                         :type="row.payMethod=='1'?'warning':'success'">
                  {{ row.payMethod=='1'?'余额支付':'微信支付' }}
                </el-link>
              </template>
              <template v-slot:plusClockPrice="{ row }">
                <div class="flex">
                  ￥{{ row.plusClockPrice }}
                </div>
              </template>

              <template v-slot:orderingInformation="{ row }">

                <div class="flex">
                  <img class="avaterNames "
                       :src="row.packageList?.rotationChart?row.packageList?.rotationChart:'https://n8.dns06.com/fd38b968cd6745599b8cf33bd9b6710a.png'"
                       alt="" />
                  <div>{{ row.packageList?.tradeName }}</div>
                </div>
              </template>
              <template v-slot:serviceClock="{ row }">

                <div class="flex">
                  {{ row?.packageList?.clockTime }}分钟
                </div>
              </template>
              <!-- 操作 -->
              <template v-slot:action="{ row }">
                <el-link v-if="row?.authenticationNot !== 4"
                         icon="el-icon-tickets"
                         type="primary"
                         :underline="false"
                         @click="viewDetail(row)">
                  查看详情
                </el-link>

              </template>
            </ele-pro-table>
          </div>
        </div>

      </el-card>
      <!-- 下单地址 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>上门地址</span>
        </div>
        <div class="padding30">
          <div class="flex-align-center">下单人

            <img class="avaterName"
                 :src="orderInfoData?.user?.avatar"
                 alt="" />
            <span>{{ orderInfoData?.addressManagement?.consignee }}</span>
          </div>
          <div>联系方式:{{ orderInfoData.addressManagement?.mobile }}</div>
          <div>服务地址:{{ orderInfoData.addressManagement?.province }} - {{
              orderInfoData.addressManagement?.city
            }} - {{orderInfoData.addressManagement?.district}} - {{orderInfoData.addressManagement?.address }}</div>
          <div v-if="orderInfoData.addressManagement?.detailsAddress">详细地址:{{ orderInfoData.addressManagement?.detailsAddress }}</div>
        </div>
      </el-card>
      <!-- 嵌套抽屉 -->
      <!-- <el-drawer :append-to-body="true"
                 :before-close="handleCloseInner"
                 :visible.sync="innerDrawer">
        <el-card class="box-card"
                 shadow="never">
          <div slot="header"
               class="clearfix">
            <span>订单信息</span>
          </div>
          <div class="padding30">
            <div>父类订单编号: {{ subOrderInfoData?.fatherOrderNumber }}</div>
            <div>子类订单编号: {{ subOrderInfoData?.orderNumber }}</div>

            <div>服务时长:
              {{
              subOrderInfoData?.packageList?.serviceTime
                ? subOrderInfoData?.packageList?.serviceTime 
                : '0'
            }} 分钟</div>
            <div>出行费用:
              ￥{{
              subOrderInfoData?.expensesIncurred
                ? subOrderInfoData?.expensesIncurred
                : '0'
            }} 元</div>
            <div v-if="subOrderInfoData?.status">支付状态: {{ informationType(subOrderInfoData?.status).status }}</div>

          
            <div>订单时间: {{formattedDate(subOrderInfoData?.updatedAt)  }}</div>
            <div>支付方式: {{subOrderInfoData?.payMethod=='1'?'余额支付':'微信支付'  }}</div>
            <div v-if="subOrderInfoData?.remark">订单备注: {{subOrderInfoData.remark }}</div>
            <div v-if="subOrderInfoData?.orderList?.length">实付款:
              ￥{{
             Number(( subOrderInfoData?.disbursements)) + disbursementsTotal
            }} 元</div>
            <div v-else>实付款:
              ￥{{
              subOrderInfoData?.disbursements ? subOrderInfoData.disbursements : '0'
            }} 元</div>

            <div v-if="subOrderInfoData?.status==5&& !(subOrderInfoData?.payStatus=='2')">退款费率: <span style="color: red;">{{ subOrderInfoData?.refundRate }}%</span></div>

            <div v-if="subOrderInfoData?.status==5&& !(subOrderInfoData?.payStatus=='2')">实际退款: <span style="color: red;">{{ subOrderInfoData?.refundAmount?subOrderInfoData.refundAmount:0}}元</span></div>
          </div>
        </el-card>

        <el-card class="box-card"
                 shadow="never">
          <div slot="header"
               class="clearfix">
            <span>商品信息</span>
          </div>
          <div class="realNameStyle display">
            <img class="avaterName"
                 :src="subOrderInfoData?.packageList?.rotationChart"
                 alt="" />
            <div class="flex-column-between"
                 style="height: 74px">
              <div>{{ subOrderInfoData?.orderName }}</div>

              <div class="technicianName">数量x{{ subOrderInfoData?.number }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card"
                 shadow="never">
          <div slot="header"
               class="clearfix">
            <span>订单统计</span>
          </div>
          <div class="realNameStyle ">
            <div class="padding30">
              <div>技师抽佣:{{ subOrderInfoData?.technicianCommissionRatio?subOrderInfoData?.technicianCommissionRatio:'--' }}%</div>
              <div style="font-weight: 700;color: black;">一级分销</div>
              <div>姓名：<span style="color: #1890ff;">{{ subOrderInfoData?.firstOrderUsername?subOrderInfoData?.firstOrderUsername:'--' }}</span></div>
              <div>佣金：{{ subOrderInfoData?.firstOrderAmount?subOrderInfoData?.firstOrderAmount:'--' }}</div>
              <div style="font-weight: 700;color: black;">二级分销</div>
              <div>姓名：<span style="color: #1890ff;">{{  subOrderInfoData?.secondLevelUsername?subOrderInfoData?.secondLevelUsername:'--' }}</span></div>
              <div>佣金：{{ subOrderInfoData?.secondLevelAmount?subOrderInfoData?.secondLevelAmount:'--' }}</div>
            </div>
          </div>

        </el-card>

        <el-card class="box-card"
                 shadow="never">
          <div slot="header"
               class="clearfix">
            <span>上门地址</span>
          </div>
          <div class="padding30">
            <div class="flex-align-center">下单人

              <img class="avaterName"
                   :src="subOrderInfoData?.user?.avatar"
                   alt="" />
              <span>{{ subOrderInfoData?.addressManagement?.consignee }}</span>
            </div>
            <div>联系方式:{{ subOrderInfoData?.addressManagement?.mobile }}</div>
            <div>服务地址:{{ subOrderInfoData?.addressManagement?.province }} - {{
              subOrderInfoData?.addressManagement?.city
            }} - {{subOrderInfoData?.addressManagement?.district}} - {{subOrderInfoData?.addressManagement?.address }}</div>
            <div v-if="subOrderInfoData?.addressManagement?.detailsAddress">详细地址:{{ subOrderInfoData?.addressManagement?.detailsAddress }}</div>
          </div>
        </el-card>
      </el-drawer> -->
    </el-drawer>

  </div>
</template>
<script>
import {

  sitePlatformConfigDetail,

} from '@/api/basicConfiguration/platformConfiguration';
import moment from 'moment'
// import { orderInfoData } from '../constant/constant';
export default {
  name: 'drawerOrderInfo',
  components: {},
  props: {
    drawerOrderInfo: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      orderInfoData: {},
      isUpdate: false,
      integralName: '',
      //  服务时长
      serviceTimeTotal: 0,
      subOrderInfoData: null,
      disbursementsTotal: 0,
      innerDrawer: false,
      columns: [
        {
          width: 5,
          type: 'expand',
          columnKey: 'expand',
          align: 'center',
          slot: 'expand'
        },

        {
          prop: 'orderingInformation',
          label: '订单信息',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'orderingInformation'
        },


        {
          prop: 'orderNumber',
          label: '加钟订单',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 180,

        },

        {
          prop: 'payMethod',
          label: '支付方式',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'payMethod'
        },
        {
          prop: 'plusClockPrice',
          label: '加钟费用',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'plusClockPrice'
        },
        {
          prop: 'serviceClock',
          label: '加钟时长',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'serviceClock'
        },

        {
          prop: 'number',
          label: '数量',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'number'
        },

        {
          prop: 'createdAt',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        },
        // {
        //   columnKey: 'action',
        //   label: '操作',
        //   width: 320,
        //   align: 'center',
        //   resizable: false,
        //   slot: 'action',
        //   showOverflowTooltip: true,

        //   fixed: 'right'
        // }
      ],
    };
  },
  computed: {


    formattedDate () {
      return (params) => {
        const currentDate = moment(params);
        const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
        return formattedDate;
      };
    },
    cardCoupon () {
      return function (pointsUsed, deductionAmount) {
        console.log(pointsUsed, deductionAmount)
        let pointsUseds = pointsUsed ? pointsUsed : 0
        let deductionAmounts = Number(deductionAmount) ? Number(deductionAmount) : 0
        if (deductionAmounts >= pointsUseds) {
          const cardCoupon = deductionAmounts - pointsUseds
          return cardCoupon
        } else {
          return 0
        }
      }
    },
    // 实名认证
    informationType () {
      return function (informationType) {

        if (informationType == 0) {
          return {
            status: '待付款',
            types: 'danger'
          };
        } else if (informationType == 1) {
          return {
            status: '待接单',
            types: 'warning'
          };
        } else if (informationType == 2) {
          return {
            status: '已接单',
            types: 'success'
          };
        } else if (informationType == 3) {
          return {
            status: '服务中',
            types: 'success'
          };
        } else if (informationType == 4) {
          return {
            status: '已经完成',
            types: 'success'
          };
        } else if (informationType == 5) {
          return {
            status: '已取消/退款',
            types: 'danger'
          };
        }
      };
    }
  },
  activated () {
    this.reload()

  },
  methods: {
    /* 刷新表格 */
    reload (where) {
      this.$nextTick(() => {
        this.$refs.table?.reload();
      })
    },
    async init () {
      const res = await sitePlatformConfigDetail()
      console.log(res)
      if (res) {
        this.integralName = res.integralName
      }
    },
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.serviceTimeTotal = 0
      this.disbursementsTotal = 0
      this.$emit('update:drawerOrderInfo', false);
    },
    /* 表格数据源 */
    async datasource ({ page, limit, where, order }) {
      this.$nextTick(() => {

      })
      if (!where.deleted);

      // 这里需要进行判断 如果有加套餐 需要根据  fatherOrderNumber 变成一条数据
      const res = {
        count: this.orderInfoData?.orderList.length,
        list: this.orderInfoData?.orderList
      }
      console.log(res)
      return res
    },

    // 打开嵌套抽屉
    viewDetail (row) {
      this.innerDrawer = true

      this.subOrderInfoData = row
      console.log(this.subOrderInfoData)
    },

    handleCloseInner (done) {
      this.$confirm('确定关闭吗？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  },
  watch: {
    drawerOrderInfo (visible) {
      this.$nextTick(() => {
        if (visible) {
          if (this.data) {
            // 隐藏账号密码

            console.log(this.data);
            this.orderInfoData = this.data;

            if (this.orderInfoData.orderList?.length) {
              this.orderInfoData.orderList.forEach((item) => {
                this.serviceTimeTotal = Number(item.serviceTime) + Number(this.serviceTimeTotal)
              })

            }
            if (this.orderInfoData.orderList?.length) {
              this.orderInfoData.orderList.forEach((item) => {
                this.disbursementsTotal = Number(item.plusClockPrice) + Number(this.disbursementsTotal)
              })
              console.log(this.disbursementsTotal)
            }
            this.reload()

            // this.$util.assignObject(this.form, {
            //   ...this.data
            // });

            // this.form.dateRange = [this.data.startDate, this.data.endDate];

            this.isUpdate = true;
          } else {
            this.isUpdate = false;
            this.hiddenPassword = true;
          }
        } else {
          //   this.$nextTick(() => {
          //     this.$refs['form'].resetFields();
          //     console.log(this.form);
          //     this.fileList = [];
          //   });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.avaterNames {
  width: 32px;
  height: 32px;

  margin-right: 5px;
}
.box-card {
  /deep/.el-card__header {
    background-color: #fafafc;
  }
  .clearfix {
    font-weight: 700;
    color: #000;
  }
  .padding30 {
    .avaterName {
      margin-left: 10px;
      width: 32px;
      height: 32px;
      border-radius: 32px;
      margin-right: 5px;
    }

    div {
      margin-bottom: 20px;
    }
    div:last-child {
      margin-bottom: 0px;
    }
  }
  .realNameStyle {
    position: relative;
    .avaterName {
      width: 74px;
      height: 74px;
      margin-right: 10px;
      vertical-align: middle;
      margin-right: 5px;
    }
    .addClocks {
      position: absolute;
      top: 0;
      width: 30px;
      line-height: 24px;
      text-align: center;
      height: 24px;
      background-color: #1890ff;
    }
    .technicianName {
      color: #1890ff;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }
}
.drawerDetail {
}
</style>
